<template>
  <div class="deckgl-test">
    <h3>Deck.gl 安装测试</h3>
    <div ref="container" class="test-container"></div>
    <p class="status">{{ status }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Deck } from '@deck.gl/core'
import { ScatterplotLayer } from '@deck.gl/layers'

const container = ref(null)
const status = ref('初始化中...')

onMounted(() => {
  try {
    // 测试数据
    const data = [
      { position: [0, 0], size: 100, color: [255, 0, 0] },
      { position: [100, 100], size: 80, color: [0, 255, 0] },
      { position: [-100, 100], size: 60, color: [0, 0, 255] }
    ]

    // 创建 Deck.gl 实例
    const deck = new Deck({
      container: container.value,
      initialViewState: {
        longitude: 0,
        latitude: 0,
        zoom: 1,
        pitch: 0,
        bearing: 0
      },
      controller: true,
      layers: [
        new ScatterplotLayer({
          id: 'test-layer',
          data,
          getPosition: d => d.position,
          getRadius: d => d.size,
          getFillColor: d => d.color
        })
      ]
    })

    status.value = '✓ Deck.gl 安装成功！可以正常使用。'
    console.log('✓ Deck.gl 测试通过')
  } catch (error) {
    status.value = '✗ Deck.gl 安装失败: ' + error.message
    console.error('✗ Deck.gl 测试失败:', error)
  }
})
</script>

<style scoped>
.deckgl-test {
  padding: 20px;
  text-align: center;
}

.test-container {
  width: 100%;
  height: 400px;
  background: #f5f5f5;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 20px 0;
}

.status {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
</style>

